<template>
  <div :class="className" :style="{ backgroundColor: datas.preview_color }">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div :class="`diyGood${datas.sort_style.choose_icon} shop`" @scroll="orderScroll">
      <div v-if="(datas.list.data && datas.list.data.length <= 0) || datas.list.length <= 0" style="width: 100%; height: 150px; text-align: center;">
        <img src="../../assets/images/blank.png" alt="" style="width: 5rem; margin: 2rem 0;" />
      </div>
      <!-- childComponent : 选项卡-->
      <!-- [childComponent == 'tab' ? 'tabMarginSub' : ''] -->
      <div v-for="(item, index) in datas.list.data ? datas.list.data : datas.list" :class="checkChooseIcon(index, id)" :key="index" @click.stop.prevent="gotoDetail(item)" style="overflow: hidden;">
        <div
          class="Failure"
          v-if="datas.disable_good != 0 && item.stock_status && item.stock_status != 0 && datas.disable_good != 3"
          :class="[disable_good_show_class]"
        >
        <!-- disable_good 0 不显示失效 1样式一 2样式二 -->
          <div v-if="item.stock_status == 1 || item.stock_status == 2" class="Failure_text">{{ datas.disable_good == 1 ? $i18n.t(datas.lose_efficacy_title) :$i18n.t(datas.lose_efficacy_title) }}</div>
          <div v-if="item.stock_status == 3 || item.stock_status == 4" class="Failure_text">
            {{ $i18n.t("不存在") }}
          </div>
        </div>

        <div :class="choose_icon_six_style_top(index)">
          <div class="failureThr" v-if="item.stock_status && item.stock_status != 0 && datas.disable_good == 3 && datas.disable_good != 0">
            <div v-if="item.stock_status == 1 || item.stock_status == 2" class="Failure_text">{{ $i18n.t(datas.lose_efficacy_title) }}</div>
            <div v-if="item.stock_status == 3 || item.stock_status == 4" class="Failure_text">
              {{ $i18n.t("不存在") }}
            </div>
          </div>
          <div class="donation" v-if="datas.content_list.includes('11') && donationShow(item)">
            <div class="donation_t">{{ $i18n.t("money") }}{{ donationShow(item) }}</div>
          </div>
          <div
            class="good_Attributes"
            :style="{
              width: datas.good_tag.choose_icon == 7 ? '35px' : '',
              height: datas.good_tag.choose_icon == 7 ? 'auto' : ''
            }"
          >
            <!-- 限时抢购 -->
            <img src="../../assets/images/new_diy/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon == 5" alt="" />
            <!-- 包邮 -->
            <img src="../../assets/images/new_diy/baoyou@2x.png" v-if="datas.good_tag.choose_icon == 4" alt="" />
            <!-- 热销 -->
            <img src="../../assets/images/new_diy/hot@2x.png" v-if="datas.good_tag.choose_icon == 2" alt="" />
            <!-- 新上 -->
            <img src="../../assets/images/new_diy/new@2x.png" v-if="datas.good_tag.choose_icon == 3" alt="" />
            <!-- 推荐 -->
            <img src="../../assets/images/new_diy/recommend@2x.png" v-if="datas.good_tag.choose_icon == 1" alt="" />
            <!-- 自定义 -->
            <img :src="datas.good_tag.image" style="width: 100%;" v-if="datas.good_tag.choose_icon == 7" alt="" />
          </div>
          <!-- v-lazy="item.img || emptyImage" 处理供应链商品图片供应链设置了防盗导致403-->
          <img v-if="item.plugin_id == 120" :src="item.img || emptyImage" referrerPolicy="no-referrer" alt="" class="goodsImg" />
          <img v-else v-lazy="item.img || emptyImage" referrerPolicy="no-referrer" alt="" class="goodsImg" />
        </div>
        <div :class="choose_icon_six_style_bottom(index)">
          <div class="Child_title" v-if="datas.content_list.includes('1')">
            {{ item.name | escapeTitle }}
          </div>
          <div style="flex: 1"></div>
          <div class="Child_other">
            <div class="oneChild_sales" :style="datas.sort_style.choose_icon == 1 ? 'color: #fff' : ''" v-if="datas.content_list.includes('7')">销量 {{ item.sales }}</div>
            <div
              class="oneChild_activity"
              :style="datas.sort_style.choose_icon == 1 ? 'color: #fff' : ''"
              v-if="!datas.content_list.includes('5') && datas.content_list.includes('6') && item.point != 0"
            >
              赠送{{ item.point }}{{ integral }}
            </div>
            <div
              class="oneChild_activity"
              :style="datas.sort_style.choose_icon == 1 ? 'color: #fff' : ''"
              v-if="datas.content_list.includes('5') && item.award == 1 && (!item.vip_level_status || (item.vip_level_status && item.vip_level_status.status == 0))"
            >
              赠送{{ item.award_proportion }}{{ (plugin_setting.love && plugin_setting.love.reward_love_name) || "爱心值" }}
            </div>
            <div class="oneChild_activity" v-if="datas.content_list.includes('9') && item.love_deduction == 1" :style="datas.sort_style.choose_icon == 1 ? 'color: #fff' : ''">
              抵扣{{ item.love_deduction_proportion }}{{ (plugin_setting.love && plugin_setting.love.deduction_love_name) || "爱心值" }}
            </div>
            <div class="oneChild_activity" v-if="datas.content_list.includes('12') && item.activation_state == 1" :style="datas.sort_style.choose_icon == 1 ? 'color: #fff' : ''">
              {{ (plugin_setting.love && plugin_setting.love.usable_love_name) || "爱心值" }}激活{{ item.love_accelerate }}
            </div>
            <div class="oneChild_activity" v-if="datas.content_list.includes('17') && item.love_bonus_pool_amount" :style="datas.sort_style.choose_icon == 1 ? 'color: #fff' : ''">
              {{ item.love_bonus_pool_amount }}
            </div>
          </div>
          <div class="Child_member_price flex-a-c " v-if="datas.content_list.includes('4') && !item.point_goods && !item.notshow">
            <!--item.notshow 会员中心增加的判断-->
            <div
              :style="{ marginRight: goods_style_set && goods_style_set.member_status && datas.sort_style.choose_icon != 4 && datas.sort_style.choose_icon != 5 ? '6px' : '' }"
            >
              <em v-if="datas.show_price_text">{{ vip_price_txt }} </em>
              <em >{{ $i18n.t("money") }}</em>
              <span style="font-size: 14px;">{{
                item.vip_level_status && item.vip_level_status.status == 1 ? item.vip_level_status.word : item.price_level == 1 ? item.vip_price : item.vip_next_price
              }}</span>
            </div>

            <!-- 三排不显示tag-icon -->
            <div
              v-if="goods_style_set && goods_style_set.member_status && datas.sort_style.choose_icon != 4 && datas.sort_style.choose_icon != 5"
              class="flex-a-c tag-icon"
              :style="{ background: goods_style_set.member_color, color: goods_style_set.member_word_color }"
            >
              <img :src="goods_style_set.member_thumb_url" alt="" />
              <div>{{ goods_style_set.member_name }}</div>
            </div>
          </div>
          <div class="Child_price">
            <div class="child_left_price">
              <div class="Child_now_price ">
                <span
                  class="flex-a-c"
                  :style="{
                    fontSize: item.vip_level_status && item.vip_level_status.status == 1 ? '12px' : '',
                    flexWrap: 'wrap'
                  }"
                  v-if="nowPriceOption(item)"
                >
                  <template v-if="!item.point_goods">
                    <em v-if="datas.show_price_text">{{ price_text }}</em
                    ><em>{{ $i18n.t("money") }}</em>
                  </template>
                  {{ item.point_goods ? item.point_goods.min_point : item.vip_level_status && item.vip_level_status.status == 1 ? item.vip_level_status.word : item.pricenow }}
                  <em v-if="item.point_goods"> {{ integral }}</em>
                  <!-- 三排不显示tag-icon -->
                  <div
                    v-if="goods_style_set && goods_style_set.current_status && datas.sort_style.choose_icon != 4 && datas.sort_style.choose_icon != 5"
                    class="flex-a-c tag-icon"
                    :style="{ background: goods_style_set.current_color, color: goods_style_set.current_word_color, marginLeft: '6px' }"
                  >
                    <img :src="(item.good_style && item.good_style.current_logo_url) || goods_style_set.current_thumb_url" alt="" />
                    <div>{{ (item.good_style && item.good_style.current_name) || goods_style_set.current_name }}</div>
                  </div>
                </span>
                <span v-if="afterCouponPrice(item)">
                  <em v-if="datas.show_price_text">券后价</em><em>{{ $i18n.t("money") }}</em> {{ item.coupon.deduct_price }}
                </span>
              </div>
              <div class="plugShow" v-if="love_price_display_deduction_Show(item) || points_price_display_c(item) || after_coupon_price(item)">
                <div class="Child_now_price" v-if="love_price_display_deduction_Show(item)">
                  {{ $i18n.t("money") }}
                  {{ love_price_display_deduction_Show(item) }}
                </div>
                <!-- 积分价格插件 points-price-display -->
                <span class="Child_now_price" v-if="points_price_display_c(item)">{{ points_price_display_c(item) }}</span>
                <!-- 配销券 -->
                <div class="Child_now_price" v-if="after_coupon_price(item)">{{ $i18n.t("money") }}{{ after_coupon_price(item) }}</div>
              </div>
            </div>

            <div class="Child_buyBtn">
              <div class="buyBtn" :class="`buyBtn_${datas.button_type}`" v-if="isShowButton(datas)">
                <template v-if="datas.button_type == 1 || datas.button_type == 2">{{ datas.button_title }}</template>
                <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3 || datas.button_type == 4"></i>
                <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5 || datas.button_type == 6"></i>
              </div>
            </div>
          </div>
          <div :class="checkDecoration(item)" v-if="originalPrice(item)">
            <em v-if="datas.show_price_text">{{ market_price_text }}</em>{{ $i18n.t("money") }}{{ item.priceold }}
          </div>
          <div class="oneChild_pass_price" v-if="pass_PriceC(item)">{{ item.pass_price.name }}:{{ item.pass_price.price }}</div>
          <div class="show_price_box" v-if="!fun.isTextEmpty(item.goods_show)">
            <div class="show_price" :class="[i % 2 == 0 ? 'red_white' : 'white_red']" v-for="(items, i) in item.goods_show" :key="i">{{ items.name }}:{{ items.value }}</div>
          </div>


          <!-- 分类 -->
          <div class="Child_now_price_coupon_displayc" v-if="coupon_price_displayc(item)">
            <div class="Child_now_price_coupon f-11" :style="[coupon_price_displayc_style()]">{{ coupon_price_displayc(item) }}</div>
          </div>

          <!-- dev(#40505)：商品新增显示赠送贡献值 -->
          <div class="Child_now_price_coupon_displayc" v-if="datas.content_list.includes('16') && item.concession_ratio">
            <div class="Child_now_price_coupon f-11" :style="[coupon_price_displayc_style()]">赠送{{ item.concession_ratio }}贡献值</div>
          </div>
        </div>
      </div>
    </div>

    <div :style="{ backgroundColor: datas.preview_color }" v-if="datas.sort_style.choose_icon != 5 && !childComponent">
      <div class="loadMore" v-if="isLoadMore" @click="getMoreData">
        {{ $i18n.t("加载更多") }}
      </div>
      <div class="loadMore" v-if="lastIndex == index && allLoaded">{{ $i18n.t("没有更多了") }}~~</div>
    </div>
    <div class="tabMoreBox" v-if="childComponent == 'tab'">
      <div v-if="total_page > page" class="tabMore" :style="{ backgroundColor: childStyle.check_more_bg_color, color: childStyle.check_more_color }" @click="getMoreDataTest">查看更多</div>
      <!-- <div v-if="total_page <= page" class="tabMore" :style="{ backgroundColor: childStyle.check_more_bg_color ,color:childStyle.check_more_color }">没有更多了</div> -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import emptyImage from "@/assets/images/new_diy/image.png";

// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const {
      preview_color,
      padding_top,
      padding_bottom,
      padding_left,
      padding_right,
      item_radius,
      show_shadow,
      show_border,
      border_color,
      button_bg_color,
      button_color,
      font_color,
      font_size
    } = this.datas;

    return `
        .component-${this.id} .shop{
            background-color: ${preview_color};
            padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
        }

        .component-${this.id} .shop .Child_buyBtn {
            color: ${button_color}
        }

        .component-${this.id} .shop .Child_title {
            color: ${font_color}!important;
            font-size: ${font_size}px!important;
        }
        .component-${this.id} .shop .buyBtn_1 {
          background-color: ${button_bg_color};
        }

        .component-${this.id} .shop .Child_buyBtn .buyBtn_2, .component-${this.id} .shop .Child_buyBtn .buyBtn_4, .component-${this.id} .shop .Child_buyBtn .buyBtn_6 {
            border: solid 0.5px ${button_bg_color};
            color: ${button_bg_color};
        }

        .component-${this.id} .shop .buyBtn_3, .component-${this.id} .shop .buyBtn_5 {
            color: ${button_color};
            background-color: ${button_bg_color};
        }

        .component-${this.id} .shop .buyBtn_4, .component-${this.id} .shop .buyBtn_6 {
            color: ${button_color};
            border: solid 0.5px ${button_color};
        }

        .component-${this.id} .diyGoodlist1, .component-${this.id} .diyGoodlist2, .component-${this.id} .diyGoodlist4, .component-${this.id} .diyGoodlist3, .component-${this.id} .diyGoodlist5 {
            border-radius: ${item_radius}px !important;
        }

        .component-${this.id} .shop .Failure {
            border-radius: 0;
        }

        .component-${this.id} .diyGoodlist3 .Failure {
            border-radius: 0;
        }

        .component-${this.id} .diyGoodlist1, .component-${this.id} .diyGoodlist3, .component-${this.id} .diyGoodlist4,.component-${this.id} .diyGoodlist5,.component-${
  this.id } .diyGoodlist6,.component-${this.id} .diyGoodlist2  {
            border: ${show_border ? "1" : "0"}px solid ${border_color};
            box-shadow: ${show_shadow ? "1" : "0"}px ${show_shadow ? "1" : "0"}px ${show_shadow ? "5" : "0"}px ${border_color};
        }

        .component-${this.id} .diyGoodlist3 .oneChild_right {
            border-radius: 0 ${item_radius}px ${item_radius}px 0;
        }
    `;
  }
};

export default {
  data() {
    return {
      emptyImage,
      isLoadMore: true, //true 可以加载更多
      page: 1,
      total_page: 0,
      allLoaded: false, // 全部数据已经加载完成
      alreadyHandleArray: [],
      arrIndex: 1,
      integral: "",
      per_page: 12,

      clientWidth: "375",
      plugin_setting: {}
    };
  },
  props: ["store_id", "isBottom", "lastIndex", "index", "page_id", "id", "datas", "component_key", "tabcontrol", "isLast", "plugin_active", "childComponent", "childStyle", "leftShow"],
  // plugin_active是会员中心用的
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    checkChooseIcon(index, id) {
      return function(index, id) {
        if (this.datas.sort_style.choose_icon == 6) {
          if (index % 3 == 0) {
            // 大图
            return `diyGoodlist1 diyGoodlis-${id}`;
          } else {
            // 双排
            return `diyGoodlist2 diyGoodlis-${id}`;
          }
        } else {
          return `diyGoodlist${this.datas.sort_style.choose_icon} diyGoodlis-${id}`;
        }
      };
    },
    choose_icon_six_style_top(index) {
      return function(index) {
        let str = "";
        if (this.datas.sort_style.choose_icon == 3) {
          str = "oneChild_left";
        } else {
          str = "threeChild_top";
        }
        if (this.childComponent == "tab" && this.leftShow) {
          str = `${str} threeChild_top_tab`;
        }
        return str;
      };
    },
    choose_icon_six_style_bottom(index) {
      return function(index) {
        // datas.sort_style.choose_icon == '1' ? 'twoChild_bottom' : datas.sort_style.choose_icon == 3 ? 'oneChild_right' : 'threeChild_b'
        if (this.datas.sort_style.choose_icon == "6") {
          if (index % 3 == 0) {
            // 大图
            return "twoChild_bottom";
          } else {
            // 双排
            return `threeChild_b`;
          }
        } else if (this.datas.sort_style.choose_icon == "1") {
          return "twoChild_bottom";
        } else if (this.datas.sort_style.choose_icon == "3") {
          return "oneChild_right";
        } else {
          return "threeChild_b";
        }
      };
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    market_price_text() {
      if (this.$store.state.shopLanguage.goods) {
        // 原价  系统自定义
        return this.$store.state.shopLanguage.goods.market_price || "原价";
      } else {
        return "原价";
      }
    },
    price_text() {
      if (this.$store.state.shopLanguage.goods) {
        // 现价  系统自定义
        return this.$store.state.shopLanguage.goods.price || "现价";
      } else {
        return "现价";
      }
    },
    vip_price_txt() {
      if (this.$store.state.shopLanguage.goods) {
        // 会员价  系统自定义
        return this.$store.state.shopLanguage.goods.vip_price || "会员价";
      } else {
        return "会员价";
      }
    },
    checkDecoration(item) {
      return item => {
        let show = this.$store.state.temp.mailInfo.scribing_show;
        if (show == 1 && (item.plugin_id == "92" || item.plugin_id == "0")) {
          return "oneChild_original_price_lineNone";
        } else {
          return "oneChild_original_price";
        }
      };
    },
    // 装修 现价显示判断 计算属性 conten_list = 3
    nowPriceOption(item) {
      return function(item) {
        if (
          ((this.datas.content_list.includes("3") && !this.datas.content_list.includes("8")) || (this.datas.content_list.includes("8") && item.coupon && item.coupon.coupon_method === 0)) &&
          !this.love_price_display_deduction_Show(item) &&
          !this.points_price_display_c(item) &&
          !this.after_coupon_price(item)
        ) {
          return true;
        } else {
          return false;
        }
      };
    },
    // 装修 券后价显示判断 计算属性 conten_list = 8
    afterCouponPrice(item) {
      return function(item) {
        if (
          this.datas.content_list.includes("8") &&
          item.coupon &&
          item.coupon.coupon_method !== 0 &&
          !this.love_price_display_deduction_Show(item) &&
          !this.points_price_display_c(item) &&
          !this.after_coupon_price(item)
        ) {
          return true;
        } else {
          return false;
        }
      };
    },
    // 装修 原价显示判断 计算属性 conten_list = 2
    originalPrice(item) {
      return function(item) {
        if (
          this.datas.content_list.includes("2") &&
          item.priceold != 0 &&
          item.priceold != item.pricenow &&
          !item.point_goods &&
          Number(item.pricenow) < Number(item.priceold) &&
          !this.love_price_display_deduction_Show(item) &&
          !this.points_price_display_c(item) &&
          !this.after_coupon_price(item)
        ) {
          return true;
        } else {
          return false;
        }
      };
    },
    // 宙子云四期 通证价
    pass_PriceC(item) {
      return function(item) {
        if (item.pass_price) {
          return true;
        } else {
          return false;
        }
      };
    },
    // 金额 + 配销券
    after_coupon_price(item) {
      return function(item) {
        if (this.datas.content_list.includes("14") && item.after_coupon_price && item.current_price) {
          return `${item.after_coupon_price}+${item.current_price}配销券`;
        } else {
          return false;
        }
      };
    },
    // 金额 + 可用爱心值
    love_price_display_deduction_Show(item) {
      return function(item) {
        if (
          this.datas.content_list.includes("10") &&
          item.love_price_display_deduction &&
          item.love_price_display_deduction.enable == 1 &&
          item.vip_level_status &&
          item.vip_level_status.status != 1
        ) {
          return `${item.love_price_display_deduction.goods_price}+${item.love_price_display_deduction.value}${item.love_price_display_deduction.name}`;
        } else {
          return false;
        }
      };
    },
    disable_good_show_class(){
      if(this.datas.disable_good == 1 || this.datas.disable_good == 2){
        if(this.childComponent == 'tab'){
          return 'failure_cover_tab';
        } else{
          if(this.datas.disable_good == 2){
            return 'failure_cover_disable_good_two';
          }
          return 'failure_cover';
        }
      }
    },
    // 分类|卷后价显示
    coupon_price_displayc(item){
      return function(item){
        if(this.datas.content_list.includes("15") || this.datas.content_list.includes("13")){
          let str = "";
          // 如果选的是金额+积分的样式二 就显示 分类名称+现价
          if(this.datas.finance_point_style == "2"){
            if(!this.fun.isTextEmpty(item.first_cat_name)){
              str = `${item.first_cat_name}`
              if(item.points_price_display && item.points_price_display.goods_price){
                str += ' | '
              }
            }
            if(item.points_price_display && item.points_price_display.goods_price){
              str += `兑后价${this.$i18n.t("money")}${item.points_price_display.goods_price}`
            }
          }else if(this.datas.finance_point_style == "3" || this.datas.finance_point_style == "1"){
            if(item.first_cat_name){
              str = `${item.first_cat_name}`
            }
          }
          return str
        }else{
          return false
        }
      }
    },
    // 金额 + 积分抵扣
    points_price_display_c(item) {
      return function(item) {
        if (this.datas.content_list.includes("13") && item.points_price_display) {
          let str = "";
          // 金额 + 积分 样式二 只显示积分 {{ $i18n.t("money") }}
          if(this.datas.finance_point_style == "2"){
             str += `${item.points_price_display.deduction}${this.integral}`;
          } else if(this.datas.finance_point_style == "3"){
            str = `${item.points_price_display.deduction}${this.integral}`;
            if (item.points_price_display.goods_price && (Number(item.points_price_display.goods_price) > 0) ) {
              str += `+${item.points_price_display.goods_price}${this.$i18n.t("元")}`;
            }
          }else{
            // 金额 + 积分 样式一原来的样式
            str = `${this.$i18n.t("money")}${item.points_price_display.goods_price}`;
            if (item.points_price_display.deduction) {
              str += `+${item.points_price_display.deduction}${this.integral}`;
            }
          }
          return str;
        } else {
          return false;
        }
      };
    },
    donationShow(item) {
      return function(item) {
        if (item.donation_project_set) {
          return `${item.donation_project_set.value}${item.donation_project_set.name}`;
        } else {
          return false;
        }
      };
    },
    isShowButton(datas) {
      return function(datas) {
        if ((datas.button_type == 1 || datas.button_type == 2) && (datas.sort_style.choose_icon == 4 || datas.sort_style.choose_icon == 5)) {
          return false;
        } else {
          return true;
        }
      };
    }
  },
  watch: {
    "datas.list.current_page"(newValue, oldValue) {
      if (this.childComponent == "tab") {
        this.total_page = this.datas.list.last_page;
        this.page = this.datas.list.current_page;
      }
    },
    isBottom: function(newVal, oldVal) {
      console.log(this.lastIndex, "lastIndex");
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.datas.sort_style.choose_icon != 5 && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
            this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
            this.arrIndex = this.arrIndex + 1;
          }
        }
      } else {
        // this.lastIndex == this.index判断商品列表是最后一个组件
        if (newVal && this.lastIndex == this.index && this.datas.sort_style.choose_icon != 5 && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
            this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
            this.arrIndex = this.arrIndex + 1;
          }
        }
      }
    }
  },
  activated() {
    if (this.fun.getPhoneEnv() == 3) {
      this.clientWidth = 375;
    } else {
      this.clientWidth = document.body.clientWidth;
    }
  },
  mounted() {
    if (this.fun.getPhoneEnv() == 3) {
      this.clientWidth = 375;
    } else {
      this.clientWidth = document.body.clientWidth;
    }

    if (this.datas.list.data) {
      this.total_page = this.datas.list.last_page;
      this.per_page = this.datas.list.per_page || 12;
      this.page = this.datas.list.current_page;
      if (this.total_page <= this.page && this.datas.list.data.length <= this.per_page) {
        this.isLoadMore = false;
        this.allLoaded = true;
      }
      this.alreadyHandleArray = this.datas.list.data;
      this.datas.list.data = this.datas.list.data.slice(0, this.per_page);

      // this.datas.get_number 限制数量
      if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.get_number <= this.per_page) {
        this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
        this.isLoadMore = false;
        this.allLoaded = true;
      }
    } else {
      // if(this.datas.list.length <= 0) {
      this.isLoadMore = false;
      this.allLoaded = true;
      // }
    }
    this.plugin_setting = JSON.parse(localStorage.getItem("plugin_setting"));
    this.integral = this.fun.getCustomTextLang('member_center.credit1','积分');
    this.goods_style_set = this.plugin_setting.good_style;
  },
  methods: {
    coupon_price_displayc_style(){
      if(this.datas.content_list.includes("15") || this.datas.content_list.includes("13")){
        // let colorObj = [
        //   {color:'#F96D20',backgroundColor:'#FFEDE4'},
        //   {color:'#207EF9',backgroundColor:'#E4EFFF'},
        //   {color:'#F15353',backgroundColor:'#FEEAEA'},
        //   {color:'#A320F9',backgroundColor:'#F4E4FF'},
        //   {color:'#00922C',backgroundColor:'#E0F2E5'},
        // ]
        // let ran = Math.floor(Math.random() * (4 - 0 + 1)) + 0;
        // return colorObj[ran];
        return {color:'#ffffff',backgroundColor:this.datas.bgs_color}
      } else if (this.datas.content_list.includes("16")) {
        return { color:'#ffffff',backgroundColor:'#fe9f5a' }
      }
    },
    getMoreDataTest(e) {
      this.$emit("formSubmit");
    },
    //复制商品链接
    copyGoodsUrl(id) {
      let _link = this.fun.getSiteRoot() + "/addons/yun_shop/" + "?menu#" + "/goods/" + id + "?i=" + this.fun.getKeyByI();
      _link = this.fun.isMid(_link, this.fun.getKeyByMid());

      let message = "分享一个商品" + _link;
      this.$copyText(message).then(
        function(e) {
          Toast("复制成功");
          // console.log('复制成功', e)
        },
        function(e) {
          Toast("复制失败");
          // console.log(e)
        }
      );
    },
    editFavorite(status, gid, index) {
      // 商品收藏与取消收藏
      let that = this;
      let changes = status == 1 ? 0 : 1;
      let _url = status == 1 ? "member.member-favorite.destroy" : "member.member-favorite.store";
      $http.get(_url, { goods_id: gid }, "处理中...").then(
        function(response) {
          Toast(response.msg);
          if (response.result == 1) {
            if (that.datas.list.data) {
              that.$set(that.datas.list.data[index], "is_favorite", changes);
            } else {
              that.$set(that.datas.list[index], "is_favorite", changes);
            }
          }
        },
        function(response) {
          console.log(response);
        }
      );
    },
    //商品跳转
    gotoDetail(good) {
      let url = "";
      let params = { id: good.id };
      let query = {};
      switch (good.plugin_id) {
      case 69:
        url = "grab_group"; //抢团
        break;
      case 78:
        params.mode = 1;
        url = "newRetailSalesGood"; //新零售
        break;
      case 144:
        query.goodsId = good.id;
        url = "goodsDetails"; //消费券商品
        break;
      default:
        url = "goods";
        break;
      }
      if (good.category_option_id) {
        // 如果有默认规格id，则路由携带到详情页面
        params.coid = good.category_option_id;
      }
      this.$router.push(this.fun.getUrl(url, params, query));
    },
    orderScroll() {
      let fixedDom = document.getElementsByClassName(`diyGoodlis-${this.id}`)[0];
      let list = this.datas.list.data ? this.datas.list.data : this.datas.list;
      if (fixedDom.getClientRects()[0].x - fixedDom.offsetLeft < -(list.length - 5) * (this.clientWidth / 3)) {
        // 加载更多
        if (this.isLoadMore) {
          this.getMoreData();
        }
      }
    },
    // 获取更多数据
    getMoreData() {
      if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length >= this.per_page) {
        // 一页的数据超过per_page不另外请求接口
        this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
        this.arrIndex = this.arrIndex + 1;

        if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.list.data.length > this.datas.get_number) {
          this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
          this.isLoadMore = false;
          this.allLoaded = true;
        }
        return;
      } else if (this.page >= this.total_page && this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
        // 最后一页剩余的数据加载
        this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1)));
        if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.list.data.length > this.datas.get_number) {
          this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
        }

        this.isLoadMore = false;
        this.allLoaded = true;

        return;
      }
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
          // 最后一页剩余的数据加载
          this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1)));
          if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.list.data.length > this.datas.get_number) {
            this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
          }

          this.isLoadMore = false;
          this.allLoaded = true;
        }
      } else {
        this.page = this.page + 1;
        let _url = "home-page.get-decorate-page";
        let json = {
          page: this.page,
          decorate_id: this.page_id || this.$store.state.temp.item.id,
          component_id: this.id,
          component_key: this.component_key
        };
        if (this.tabcontrol) {
          json.component_info = JSON.stringify({ list_key: this.index });
        }
        if (this.$route.query.store_id || this.store_id) {
          json.store_id = this.$route.query.store_id || this.store_id;
          _url = "plugin.store-decorate.frotend.decorate-api.get-decorate-page";
        }
        $http.get(_url, json, "loading").then(
          response => {
            if (response.result === 1) {
              if (this.tabcontrol) {
                let data = response.data[0].remote_data.list;
                this.page = data.current_page || this.page;
                this.alreadyHandleArray = this.alreadyHandleArray.concat(data.data);
                this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
                this.arrIndex = this.arrIndex + 1;
                if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0 || this.page < this.total_page) {
                  this.isLoadMore = true;
                } else {
                  this.allLoaded = true;
                }
              } else {
                this.page = response.data.current_page || this.page;
                this.alreadyHandleArray = this.alreadyHandleArray.concat(response.data.data);
                this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
                this.arrIndex = this.arrIndex + 1;
                if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0 || this.page < this.total_page) {
                  // 判断是否最后一页  和 是否数据都加载完
                  this.isLoadMore = true;
                } else {
                  this.allLoaded = true;
                }
              }

              if (!this.fun.isTextEmpty(this.datas.get_number) && this.datas.list.data.length > this.datas.get_number) {
                this.datas.list.data = this.datas.list.data.slice(0, this.datas.get_number);
                this.isLoadMore = false;
                this.allLoaded = true;
              }
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              this.allLoaded = true;
            }
          },
          function(response) {
            console.error(response);
            // error callback
          }
        );
      }
    },

    // 会员中心用的
    loadMoreMemberData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page: this.page,
          code: this.plugin_active
        };
        $http.get("member.member.plugin-data", json, "loading").then(
          response => {
            if (response.result === 1) {
              let data = response.data.data;
              if (data.current_page) {
                this.page = data.current_page;
              }
              this.alreadyHandleArray = this.alreadyHandleArray.concat(data.data);
              this.datas.list.data = this.datas.list.data.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
              this.arrIndex = this.arrIndex + 1;
              if (this.page < this.total_page) {
                this.isLoadMore = true;
              } else {
                this.allLoaded = true;
              }
              this.$emit("setLoadMore", this.isLoadMore);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              this.allLoaded = true;
            }
          },
          function(response) {
            console.error(response);
            // error callback
          }
        );
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// @import url("../../assets/css/newDiyGood.scss");
// 默认
.component-wrapper {
  width: 100%;
  text-align: left;
}
.icon-bc_like {
  color: rgb(255, 150, 1);
}
em {
  font-size: 0.6875rem;
}
.child_left_price {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.plugShow {
  flex: 1;
  display: flex;
  flex-direction: column;
  .Child_now_price {
    line-height: 1.3rem;
  }
}
.Child_now_price_coupon_displayc{
  line-height: 1rem;
  margin-top: 0.63rem;
  .Child_now_price_coupon{
    display: inline-block;
    padding: 0rem 0.25rem;
    border-radius: 2px;
  }
}

.Failure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

  .Failure_text {
    width: 90px;
    height: 90px;
    background-color: #797979;
    border-radius: 100%;
    color: #fff;
    font-size: 20px;
    line-height: 90px;
    text-align: center;
  }
}
.failure_cover_tab{
  height: 9rem;
  width: 100%;
}
.failureThr{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.56rem;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.81rem;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.56rem;
  z-index: 1;
}

.diytab {
  .u_goodslist_four_child:nth-child(2n) {
    margin-left: 1%;
    margin-right: 1%;
  }

  .u_goodslist_four_child:nth-child(3n + 1) {
    margin-left: 0 !important;
  }
}

.good_Attributes {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  z-index: 1;
  width: 80px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.Child_title {
  line-height: 20px;
  font-size: 14px;
  color: #000;
  font-weight: bold;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.Child_other {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  font-size: 12px;
  flex-wrap: wrap;

  .oneChild_sales {
    color: #666;
    margin-right: 14px;
  }

  .oneChild_activity {
    color: #3b3b3b;
  }
}

.Child_member_price {
  color: #ff2c29;
  font-weight: bold;

  /* height: 18px; */
  word-break: break-all;
  font-size: 14px;
}

.Child_price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .Child_now_price {
    color: #ff2c29;
    font-size: 15px;
    word-break: break-all;
  }
}

.oneChild_original_price {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
  word-break: break-all;
}

.oneChild_original_price_lineNone {
  text-decoration: none;
  color: #999;
  line-height: 12px;
  font-size: 12px;
  word-break: break-all;
}

.Child_buyBtn {
  text-align: center;
  font-weight: bold;

  /* color: #fff; */
  .buyBtn {
    height: 22px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .buyBtn_1 {
    width: auto;
    min-width: 38px;
    padding: 0 6px;
    font-size: 11px;
  }

  .buyBtn_2 {
    width: 76px;
  }

  .buyBtn_3,
  .buyBtn_4 {
    border-radius: 100%;
    width: 22px;
    .iconfont {
      font-size: 12px;
      font-weight: 400;
    }
  }

  .buyBtn_5,
  .buyBtn_6 {
    border-radius: 100%;
    width: 20px;
    height: 20px;
    .iconfont {
      font-size: 18px;
    }
  }
}

.loadMore {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  clear: both;
}

/* 门店拼团 */
.show_price_box {
  display: flex;
  flex-wrap: wrap;
}

.show_price {
  font-size: 12px;
  color: #ff2c29;
  border: solid #ff2c29 1px;
  padding: 1px 4px;
  margin-top: 5px;
}

.red_white {
  color: #fff;
  background: #ff2c29;
  margin-right: 5px;
}

.white_red {
  color: #ff2c29;
  background: #fff;
}

.buttons_box {
  display: flex;
  justify-content: flex-end;

  div {
    display: flex;
  }

  .share_buton {
    margin-left: 10px;
  }
}

/* 门店拼团 */
// 多项选项卡
.tabMoreBox {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 0.15rem;
}

.tabMore {
  width: 16.88rem;
  height: 2.19rem;
  border-radius: 0.25rem;
  font-size: 0.81rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.tabMarginSub {
  width: 48.5% !important;
  margin: 0 !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.oneChild_pass_price {
  text-align: left;
  font-size: 0.625rem;
  color: #867e7e;
}

.m-l-5 {
  margin-left: 0.5rem;
}

.tag-icon {
  padding: 0 6px;
  border-radius: 1rem;
  height: 1rem !important;
  line-height: 1rem !important;
  overflow: hidden;
  font-size: 10px;

  img {
    margin: 0 4px 0 0;
    width: 12px;
    height: 12px;
  }
}
.donation {
  position: absolute;
  top: 0.63rem;
  left: 0;
  display: flex;
  z-index: 999;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.39);
  color: #fff;
  padding: 0.31rem 0.59rem 0.31rem 0.63rem;
  font-size: 0.69rem;
  line-height: 0.75rem;
  border-radius: 0rem 0.66rem 0.66rem 0rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .donation_t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/*新样式*/
.diyGood2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.diyGood6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.diyGood6 .diyGoodlist1 {
  margin: 5px 0;
}
.diyGood1 .diyGoodlist1 {
  margin: 0 auto 10px;
}
.diyGoodlist1 {
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  position: relative;
  .goodsImg {
    width: 100%;
    overflow: hidden;
    display: block;
  }
  .buyBtn_1 {
    width: 76px;
    font-size: 14px;
  }
  .twoChild_bottom {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    bottom: 0;
    color: #fff;
    padding: 10px;
    .oneChild_original_price {
      color: #fff;
      font-weight: 400;
    }
    .oneChild_sales,
    .oneChild_activity {
      color: #fff;
    }
  }
}
.diyGoodlist2 {
  position: relative;
  width: 49%;
  margin: 5px 0;
  display: flex;
  flex-direction: column;
  .failure_cover{
    height: 11rem;
    width: 100%;
  }
  .failure_cover_disable_good_two{
    height: 100%;
    width: 100%;
  }
  .threeChild_top {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    .goodsImg {
      width: 100%;
      right: 0;
      height: 100%;
      position: absolute;
    }
  }

  .threeChild_b {
    flex: 1;
    background-color: #fff;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
  }
}

.diyGood3 {
  .diyGoodlist3 {
    width: 100%;
    padding: 7px 10px;
    position: relative;
    margin-bottom: 10px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .Failure {
      width: 37%;
    }
    .oneChild_left {
      width: 36%;
      height: 0;
      padding-bottom: 36%;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .oneChild_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 4px;
      padding-left: 8px;
      .Child_price {
        line-height: 26px;
      }
      .Child_now_price {
      }
    }
    .goodsImg {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
    .Child_buyBtn .buyBtn_1 {
      height: 26px;
      border-radius: 14px;
      padding: 0px 12px;
      font-size: 14px;
    }
  }
}
.diyGood4 {
  // display: flex;
  // flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(3, 31.5%);
  grid-column-gap: 2.75%;
  grid-row-gap: 8px;
  .diyGoodlist4 {
    // width: 31.5% !important;
    // margin: 0 9px 8px 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .failure_cover {
      height: 7rem;
      width: 100%;
    }
    .failure_cover_disable_good_two{
      height: 100%;
      width: 100%;
    }
    .threeChild_top {
      width: 100% !important;
      height: 0;
      padding-bottom: 100%;
      position: relative;
    }
    .threeChild_b {
      background-color: #fff;
      padding: 6px 4px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .goodsImg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
    }
  }
  .diyGoodlist4:nth-child(3n){
    margin-right: 0;
  }
}

.diyGood5 {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  overflow-x: scroll !important;
  .diyGoodlist5 {
    width: 8.75rem !important;
    flex-shrink: 0;
    margin: 5px 10px 5px 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    .failure_cover {
      height: 9rem;
      width: 100%;
    }
    .failure_cover_disable_good_two{
      height: 100%;
      width: 100%;
    }
    .threeChild_top {
      width: 100% !important;
      height: 0;
      padding-bottom: 100%;
      position: relative;
    }
    .threeChild_b {
      flex: 1;
      background-color: #fff;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
    }
    .goodsImg {
      width: 100%;
      right: 0;
      height: 100%;
      position: absolute;
    }
  }
  .diyGoodlist5:last-child {
    margin-right: 0;
  }
}

.diyGoodlist1:last-child,.diyGoodlist3:last-child {
  margin-bottom: 0;
}

</style>
